<template>
  <view class="ver-layout">
    <view class="create-box ver-layout">
      <view class="create-title">完善班级信息</view>
      <view class="hor-layout-center create-item">
        <image class="create-item-logo" :src="classImg.ic_class_course_name"/>
        <view class="create-item-title">班级名称</view>
        <u-input v-model="classForm.class_name" placeholder="请输入班级名称"/>
      </view>
      <view class="hor-layout-center create-item">
        <image class="create-item-logo" :src="classImg.ic_class_major_type"/>
        <view class="create-item-title">容纳人数</view>
        <u-input v-model="classForm.maximum" type="number" placeholder="请输入最大容纳人数"/>
      </view>
      <view class="hor-layout-side-center create-item" @click="selectCourse">
        <view class="hor-layout-center">
          <image class="create-item-logo" :src="classImg.ic_class_course_type"/>
          <span class="create-item-title">课程类别</span>
        </view>
        <view class="hor-layout">
          <view class="create-item-select-text">
            {{ classForm.course ? `${classForm.major}-${classForm.course}` : '请选择' }}
          </view>
          <u-icon name="arrow-right" color="#999999"></u-icon>
        </view>
      </view>
      <view class="hor-layout-side-center create-item" @click="selectTeacher">
        <view class="hor-layout-center">
          <image class="create-item-logo" :src="classImg.ic_class_teacher"/>
          <view class="create-item-title">代课教师</view>
        </view>
        <view class="hor-layout">
          <view class="create-item-select-text">{{ classForm.teacher ? classForm.teacher : '请选择' }}</view>
          <u-icon name="arrow-right" color="#999999"></u-icon>
        </view>
      </view>
      <view class="hor-layout-side-center create-item" @click="classForm.showTime=true">
        <view class="hor-layout-center">
          <image class="create-item-logo" :src="classImg.ic_class_time"/>
          <view class="create-item-title">开课时间</view>
        </view>
        <view class="hor-layout">
          <view class="create-item-select-text">{{ classForm.start_time ? classForm.start_time : '请选择' }}</view>
          <u-icon name="arrow-right" color="#999999"></u-icon>
          <u-picker v-model="classForm.showTime" :params="timePara" :default-time="classForm.start_time"
                    title="选择开课时间" @confirm="selectTime"></u-picker>
        </view>
      </view>
    </view>
    <view class="save-btn" @click="saveClassInfo">保存</view>
    <u-mask :show="showCreateSuccess" @click="showCreateSuccess = false" :mask-click-able="false"
            :custom-style="{background: 'rgba(102,102,102, 0.4)'}">
      <view class="create-success-box">
        <image class="create-bg" src="@/static/home/create_class_dialog.png"/>
        <view class="create-success-info ver-layout-center">
          <view class="create-success-text">创建班级成功</view>
          <view class="create-success-hint">可前往该教师班级列表查看明细</view>
          <view class="create-success-confirm" @click="createSuccessConfirm">确认</view>
        </view>
      </view>
    </u-mask>
  </view>
</template>

<script>
import {selectCourse, selectTeacher, selectClass, createClass} from "@/router.js"
import {CreateClassApi} from "@/api/enterStudent.js"

let ic_class_course_name = require("@/static/home/ic_class_course_name.png")
    , ic_class_course_type = require("@/static/home/ic_class_course_type.png")
    , ic_class_major_type = require("@/static/home/ic_class_major_type.png")
    , ic_class_teacher = require("@/static/home/ic_class_teacher.png")
    , ic_class_time = require("@/static/home/ic_class_time.png"),
    engine = new CreateClassApi()

export default {
  name: "createClass",
  data() {
    return {
      classImg: {
        ic_class_course_name, ic_class_course_type, ic_class_major_type, ic_class_teacher, ic_class_time
      },
      timePara: {
        year: true,
        month: true,
        day: true,
        hour: false,
        minute: false,
        second: false
      },
      classForm: {
        maximum: '',
        class_name: '',
        major_id: '',
        major: '',
        course_id: '',
        course_sku: '',//课程套餐id
        course: '',
        teacher_id: '',
        teacher: '',
        start_time: '',
        showMajor: false,
        showTime: false
      },
      majorList: [
        {value: '1', label: '全部'},
        {value: '2', label: '钢琴'},
        {value: '3', label: '小提琴'},
        {value: '4', label: '萨克斯'},
        {value: '5', label: '尤克里里'}
      ],
      showCreateSuccess: false
    }
  },
  onLoad() {
    this.getMajorList()
  },
  methods: {
    getMajorList() {
      engine.getMajorList().then(res => {
        this.majorList = res.data.map(item => {
          return {value: item.id, label: item.name}
        })
      })
    },
    selectCourse() {
      this.$u.route({url: selectCourse})
    },
    selectTeacher() {
      this.$u.route({url: selectTeacher, params: {from: createClass}})
    },
    confirmSelectCourse(object) {
      console.log(object)
      this.classForm.course = object.course_title
      this.classForm.course_id = object.course_id
      this.classForm.major = object.course_major
      this.classForm.major_id = object.course_major_id
      this.classForm.course_sku = object.sku_id
    },
    confirmSelectTeacher(object) {
      this.classForm.teacher = object.name
      this.classForm.teacher_id = object.id
    },
    confirmSelectMajor(e) {
      this.classForm.major = e[0].label
      this.classForm.major_id = e[0].value
    },
    selectTime(e) {
      this.classForm.start_time = ''
      let {year, month, day, hour, minute, second} = this.timePara
      if (year) this.classForm.start_time += e.year;
      if (month) this.classForm.start_time += '-' + e.month;
      if (day) this.classForm.start_time += '-' + e.day;
      if (hour) this.classForm.start_time += ' ' + e.hour;
      if (minute) this.classForm.start_time += ':' + e.minute;
      if (second) this.classForm.start_time += ':' + e.second;
    },
    saveClassInfo() {
      engine.createClass({...this.classForm}).then(res => {
        this.$u.toast(res.message)
        if (res.code === 200)
          this.showCreateSuccess = true
      })
    },
    createSuccessConfirm() {
      this.$u.pageCallBackDelay(selectClass, 'refreshData', '')
      this.$u.routeDelay({type: 'back'})
    }
  }
}
</script>

<style>
page {
  background: #F2F2F2;
}

.create-box {
  margin: 18px 12px;
  padding: 0px 13px;
  padding-bottom: 10px;
  background: #FFFFFF;
  border-radius: 6px;
}

.create-title {
  width: 100%;
  margin-top: 18px;
  margin-bottom: 10px;
  text-align: center;
  font-size: 16px;
  color: #F67562;
}

.create-item {
  height: 45px;
}

.create-item-logo {
  width: 18px;
  height: 18px;
}

.create-item-title {
  font-size: 14px;
  color: #333333;
  margin-left: 12px;
  margin-right: 27px;
}

.create-item-select-text {
  font-size: 15px;
  color: #999999;
  margin-right: 3px;
}

.save-btn {
  margin: 15px auto;
  height: 36px;
  line-height: 36px;
  width: 70%;
  text-align: center;
  background: #42B4AB;
  border-radius: 18px;
  /* 文本样式 */
  font-size: 15px;
  font-weight: bold;
  color: #FFFFFF;
}

.create-success-box {
  position: relative;
  margin: auto;
  margin-top: calc(50vh - 363px / 2);
  height: 310px;
  width: 220px;
}

.create-bg {
  position: absolute;
  width: 220px;
  /*height: 270px;*/
  height: 310px;
}

.create-success-info {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 174px;
  padding-top: 36px;
}

.create-success-text {
  font-family: Source Han Sans CN;
  font-size: 17px;
  font-weight: bold;
  color: #000000;
}

.create-success-hint {
  margin-top: 15px;
  font-size: 12px;
  font-family: Source Han Sans CN;
  color: #CCCCCC;
}

.create-success-confirm {
  margin-top: 20px;
  width: 168px;
  height: 34px;
  text-align: center;
  line-height: 34px;
  background: #4284FD;
  border-radius: 17px;
  /*文本样式*/
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #FFFFFF;
}
</style>
